import { Input, NavBar } from 'antd-mobile'
import classnames from 'classnames'
import { useNavigate } from 'react-router-dom'
import Icon from '@/components/icon'
import styles from './index.module.scss'
import { useEffect, useRef, useState } from 'react'
// 导入io插件
import { io, Socket } from 'socket.io-client'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'

type ChatItem = {
  type: 'xz' | 'user' // 聊天人
  msg: string // 聊天内容
}
const Chat = () => {
  const history = useNavigate()
  const {
    token: { token },
  } = useSelector((state: RootState) => state.login)
  // == 组件挂载时，创建websocket连接 ==
  const socketIoRef = useRef<Socket>()
  useEffect(() => {
    socketIoRef.current = io('http://toutiao.itheima.net', {
      query: {
        // 传递token给后台鉴权
        token,
      },
      transports: ['websocket'],
    })
    socketIoRef.current.on('connect', () => {
      console.log('客户端和服务器建立连接成功')
      // 小智给用户打个招呼
      setList([
        {
          type: 'xz',
          msg: 'hi 帅哥！',
        },
      ])
    })

    // == 收 =》接收服务器发送的消息 ==
    socketIoRef.current.on('message', (data) => {
      // 把后台返回的消息显示到列表
      // console.log('之前聊天列表：', list)
      setList((lt) => [
        ...lt,
        {
          type: 'xz',
          msg: data.msg,
        },
      ])
    })

    return () => {
      // 组件销毁，关闭socket连接，释放服务器的资源
      socketIoRef.current!.close()
    }
  }, [])

  // 1. 聊天列表数据
  const [list, setList] = useState<ChatItem[]>([
    // {
    //   type: 'xz',
    //   msg: 'hi 帅哥！',
    // },
    // {
    //   type: 'user',
    //   msg: 'hi 美女！',
    // },
  ])
  // 2. 聊天输入框内容
  const [msg, setMsg] = useState('')
  // 3. 用户发送聊天内容
  const sendMsg = () => {
    /**
     * 1. 非空判断
     * 2. 发送消息，显示到聊天列表
     * 3. 发送消息给ws服务器
     */
    if (!msg.trim()) return
    setList([
      ...list,
      // 追加聊天内容
      {
        type: 'user',
        msg,
      },
    ])
    // == 发 =》发送消息给ws服务器 ==
    socketIoRef.current?.emit('message', {
      msg,
      timestamp: Date.now(),
    })
    // 清空上次输入
    setMsg('')
  }

  // 聊天内容的自滚动
  /**
   * 流程:
   * 1. 获取聊天列表的dom对象
   * 2. 获取聊天列表滚动高度? => chatBox.scrollHeight
   * 3. 执行滚动
   */
  const chatBoxRef = useRef<HTMLDivElement>(null)
  useEffect(() => {
    const chatBox = chatBoxRef.current
    if (!chatBox) return
    console.log('滚动高度：', chatBox.scrollHeight)
    chatBox.scrollTo({
      top: chatBox.scrollHeight,
      behavior: 'smooth',
    })
  }, [list])

  return (
    <div className={styles.root}>
      {/* 1. 头部导航 */}
      <NavBar className="fixed-header" onBack={() => history(-1)}>
        小智同学
      </NavBar>
      {/* 2. 聊天列表 */}
      <div ref={chatBoxRef} className="chat-list">
        {/* 1. self类名是小智（左边）2. user类名是用户（右边） */}
        {list.map((item, i) => (
          <div
            key={i}
            className={classnames(
              'chat-item',
              item.type === 'xz' ? 'self' : 'user'
            )}
          >
            {item.type === 'xz' ? (
              <Icon type="iconbtn_xiaozhitongxue" />
            ) : (
              <img src="http://geek.itheima.net/images/user_head.jpg" alt="" />
            )}
            <div className="message">{item.msg}</div>
          </div>
        ))}
      </div>
      {/* 3. 聊天输入框 */}
      <div className="input-footer">
        <Input
          value={msg}
          onChange={setMsg}
          onEnterPress={sendMsg}
          className="no-border"
          placeholder="请描述您的问题"
        />
        <Icon type="iconbianji" />
      </div>
    </div>
  )
}

export default Chat
